<template>
	<view>
		<!-- <u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="帮助与反馈"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">
		
		</view> -->
		<u-sticky bgColor="#e3e6f4">
			<u-tabs
				:scrollable="true"
				:current="current"
				lineColor="#2447FF"
				:activeStyle="{ color: ' #2447FF' }"
				:list="list1"
				@click="click"></u-tabs>
		</u-sticky>
		<view v-if="arr.length != 0">
			<view v-if="current == 0" style="padding: 15px">
				<view
					class="flex"
					@click="details(it)"
					v-for="(it, i) in arr"
					:key="i"
					style="
						padding: 15px;
						border-radius: 10px;
						background-color: #fff;
						justify-content: space-between;
						margin-bottom: 15px;
					">
					<view style="font-size: 16px">{{ it.title }}</view>
					<view class="flex">
						<view style="font-size: 14px; margin-right: 10px; color: #898a8a">查看教程</view>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="current == 1" style="padding: 15px">
				<view
					class="flex"
					@click="details(it)"
					v-for="(it, i) in arr"
					:key="i"
					style="
						padding: 15px;
						border-radius: 10px;
						background-color: #fff;
						justify-content: space-between;
						margin-bottom: 15px;
					">
					<view style="display: flex">
						<view v-if="it.project != null" style="width: 50px">
							<image
								style="width: 50px; height: 50px; border-radius: 10px; display: block"
								:src="imageurl + it.project.logo_image"
								mode=""></image>
						</view>
						<view style="font-size: 16px; margin-left: 10px; color: #1d1f20">
							{{ it.title }}
						</view>
					</view>
					<view class="flex" style="margin-left: 10px">
						<view style="font-size: 14px; margin-right: 10px; color: #898a8a; white-space: nowrap">查看教程</view>
						<u-icon name="arrow-right" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="show" :status="status" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				imageurl: config.imgurl,
				current: 0,
				list1: [
					{
						name: '新手指引',
					},
					{
						name: '项目教程',
					},
				],
				page: 1,
				data: [],
				arr: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了',
				},
				show: false,
			};
		},
		onLoad(e) {
			this.current = e.cur == '' || e.cur == null ? 0 : e.cur;
			this.noviceList();
		},
		onReachBottom() {
			this.show = true;
			if (this.data.length == '') return;
			this.status = 'loading';
			this.page++;
			this.noviceList();
			setTimeout(() => {
				if (this.data == '') this.status = 'nomore';
				else this.status = 'loading';
			}, 1000);
		},
		methods: {
			async noviceList() {
				let res = await this.$http.car.noviceList({
					type: Number(this.current) + 1,
					page: this.page,
					pageNum: 10,
				});
				if (res.code == 1) {
					this.data = res.data;
					this.arr = [...this.arr, ...this.data];
				}
			},
			click(e) {
				this.current = e.index;
				this.page = 1;
				this.arr = [];
				this.show = false;
				this.noviceList();
			},
			details(it) {
				if (this.current == 0) {
					uni.navigateTo({
						url: '/pages/home/detail?id=' + it.id + '&fl=zhiyin',
					});
				} else {
					// uni.navigateTo({
					// 	url: '/pages/home/detail?id=' + it.id,
					// });
					uni.navigateTo({
						url: '/pages/project/detail?project_id=' + it.id,
					});
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	/deep/ .uni-scroll-view-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>
